<template>
  <cjui-page-panel header="基础线状图3">
    <template #intro>
      面积图的样式效果。
    </template>
    
    <CjuiEchart :loading="false" :noData="false" :options="chartOption" class="h-full" />
  </cjui-page-panel>
</template>

<script lang="ts" setup>
import { useThemeColorVars, getAreaSimpleColor } from '@/components/cjui/Echart/index'

const { colorVars } = useThemeColorVars()

const chartOption = {
  xAxis: {
    boundaryGap: false,
    data: ['01', '02', '03', '04', '05', '06', '07']
  },
  yAxis: {},
  tooltip: {},
  series: [
    {
      name: '线1',
      data: [12, 32, 34, 45, 42, 22, 12],
      type: 'line',
      areaStyle: {
        color: getAreaSimpleColor(colorVars.value.itemColor)
      },
    },
    {
      name: '线2',
      data: [21, 22, 14, 55, 32, 34, 2],
      type: 'line',
      areaStyle: {
        color: getAreaSimpleColor(colorVars.value.blue)
      }
    },
    {
      name: '线3',
      data: [98, 57, 84, 75, 62, 34, 72],
      type: 'line',
      areaStyle: {
        color: getAreaSimpleColor(colorVars.value.green)
      }
    },
  ]
}
</script>
